<template lang="pug">
.upfile-info
    el-row(:gutter="20")
        el-col(:span="12" v-for="(item, index) in upfileInfoArr" :key="index")
          .info-list.flex.justify-s.align-s
            i.el-icon-close(@click="closeInfo(index)")
            .list-left
                AImage(:url="item.fileUrl" width="100%" height="200px" v-if="item.type === 'img'" :preview="false")
                video(v-else :src="item.fileUrl")
                .student-tags
                    el-tag(
                        v-for="(itemTag, indexTag) in item.tags"
                        :key="index"
                        closable
                        effect="plain"
                        @close="deleteTag(index, indexTag)"
                    ) {{itemTag}}
                    <i class="el-icon-edit" @click="addTags(index)"></i>
            .list-right
                .bady-active
                  .active-h 里程碑：
                .bady-active
                  .active-h 能力指标：
                .bady-active
                  .active-h 发展检表：
                .bady-active
                  .active-h 今日动态：
    addStudent(:visible.sync="visible"  :studentArr="studentArr" @save="saveTag")
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import addStudent from '@/components/Basic/addStudent'
export default {
  components: {
    AImage, addStudent
  },
  props: {
    upfileInfoArr: {
      type: Array,
      default: () => []
    },
    studentArr: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      addtagsIndex: 0
    }
  },
  computed: {
    ...mapGetters(['dict', 'curArea'])
  },
  watch: {

  },

  methods: {
    closeInfo (index) {
      this.upfileInfoArr.splice(index, 1)
      this.$emit('update:upfileInfoArr', this.upfileInfoArr)
    },
    // 删除学生
    deleteTag (index, indexTag) {
      this.upfileInfoArr[index].tags.splice(indexTag, 1)
      this.$emit('update:upfileInfoArr', this.upfileInfoArr)
    },
    // 增加学生
    addTags (index) {
      this.addtagsIndex = index
      this.visible = true
    },
    saveTag (data) {
      (this.upfileInfoArr[this.addtagsIndex].tags)
      const tagsArr = this.upfileInfoArr[this.addtagsIndex].tags
      const dataArr = tagsArr.concat(data)
      this.upfileInfoArr[this.addtagsIndex].tags = dataArr
      this.$emit('update:upfileInfoArr', this.upfileInfoArr)
    }

  }
}
</script>
<style lang="scss" scoped>

.upfile-info {
  margin-bottom: 30px;
  .info-list {
    padding: 10px;
    position: relative;
    // border: 1px solid #99999970;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .el-icon-close {
      font-size: 26px;
      cursor: pointer;
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 1000;
      color: red;
      font-weight: bold;
    }
    .list-left {
      width: 50%;
      .student-tags {
        margin-top: 20px;
        span {
          display: inline-block;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    .list-right {
      margin-left: 20px;
      .bady-active {
        margin-bottom: 20px;
        .active-h {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
